<template>
  <div>
    <p align="left" style="color: black; font-size: 20px">
      客户信息
      <el-button
        @click="Cha"
        align="right"
        type="primary"
        icon="el-icon-search"
        circle
      ></el-button>
    </p>

    <el-form ref="form" :model="form" label-width="80px">
      <el-row>
        <el-col :span="10">
          <el-form-item label="客户编号">
            <el-input v-model="form.customer_number" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="客户简称">
            <el-input v-model="form.customer_for_short" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
          <el-form-item label="客户名称">
            <el-input v-model="form.customer_client_name" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="公司地址">
            <el-input v-model="form.customer_company_address" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
          <el-form-item label="邮政编码">
            <el-input v-model="form.customer_postal_code" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="联系人">
            <el-input v-model="form.customer_linkman" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
          <el-form-item label="公司电话">
            <el-input v-model="form.customer_company_tel" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="传真号">
            <el-input v-model="form.customer_fax_number" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <span slot="footer" class="dialog-footer">
        <el-form label-width="80px">
          <el-row>
            <el-col :span="10">
              <el-form-item label="客户名称">
                <el-input v-model="pageInfo.searchItem.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="客户类型">
                <dictionaryTableSelect
                  typeKey="ketype"
                  :fieldValue.sync="customerInfo.c_ketype"
                ></dictionaryTableSelect>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label="所在省份">
                <el-select
                  v-model="pageInfo.searchItem.province_id"
                  placeholder="请选择"
                  @change="getCity(pageInfo.searchItem.province_id)"
                >
                  <el-option
                    v-for="item in province"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="所在城市">
                <el-select
                  v-model="pageInfo.searchItem.city_id"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in City"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label="联系人">
                <el-input v-model="pageInfo.searchItem.lxr"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-button
              @click="GetList"
                type="primary"
                icon="el-icon-search"
                circle
              ></el-button>
            </el-col>
          </el-row>
        </el-form>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="customer_number" label="编号" width="180">
          </el-table-column>
          <el-table-column prop="customer_client_name" label="客户名称" width="180">
          </el-table-column>
          <el-table-column prop="customer_linkman" label="联系人"> </el-table-column>
          <el-table-column prop="customer_company_address" label="公司地址"> </el-table-column>
          <el-table-column prop="customer_company_tel" label="电话"> </el-table-column>
          <el-table-column  label="操作">
              <template slot-scope="scope">
                <el-link type="primary" @click="Tian(scope.row.customer_id)">选择</el-link>
              </template>
          </el-table-column>
        </el-table>
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>

    <p align="left" style="color: black; font-size: 20px">合同信息</p>
    <fieldset>
      <el-form ref="contratc" :model="contratc" :rules="rules" label-width="150px">
         <el-row>
        <el-col :span="7">
          <el-form-item label="合同编号" prop="contract_id">
            <el-input v-model="contratc.contract_id" WarningColor="warning"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="合同文本编号">
            <el-input v-model="contratc.contract_textserial"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="合同分类">
            <el-select v-model="contratc.contract_contype" placeholder="请选择">
    <el-option
      v-for="item in contype"
      :key="item.contype_id"
      :label="item.contype_name"
      :value="item.contype_id">
    </el-option>
  </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item label="合同名称" prop="contract_contname">
            <el-input v-model="contratc.contract_contname" WarningColor="warning"></el-input>
          </el-form-item>
      </el-row>
      <el-row>
        <el-col :span="7">
          <el-form-item label="建设单位" prop="contract_conname">
            <el-input v-model="contratc.contract_conname" WarningColor="warning"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="甲方类型">
           <dictionaryTableSelect
                  typeKey="firsttype"
                  :fieldValue.sync="customerInfo.c_firsttype"
                  WarningColor="warning"
                ></dictionaryTableSelect>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="7">
          <el-form-item label="结构形式" prop="contract_const">
            <el-tree
  :data="shudata"
  show-checkbox
  ref="tree"
  node-key="structure_id"
  :props="defaultProps">
</el-tree>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="建筑分类" prop="contract_arch">
            <el-tree
  :data="shudata1"
  show-checkbox
  ref="tree1"
  node-key="architecture_id"
  :props="defaultProps1">
</el-tree>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="建筑面积㎡" prop="contract_area">
            <el-input v-model="contratc.contract_area" WarningColor="warning"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="7">
          <el-form-item label="工程负责人">
            <el-input v-model="contratc.contract_projectname"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="电话">
            <el-input v-model="contratc.contract_projecttell"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="子公司">
            <dictionaryTableSelect
                  typeKey="zicompany"
                  :fieldValue.sync="customerInfo.c_zicompany"
                  WarningColor="warning"
                ></dictionaryTableSelect>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="7">
          <el-form-item label="甲方负责人">
            <el-input v-model="contratc.contract_first_people"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="电话">
            <el-input v-model="contratc.contract_first_tell"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="工程地点" prop="contract_adder">
            <el-input v-model="contratc.contract_adder" WarningColor="warning"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="7">
          <el-form-item label="原始合同额(万元)" prop="contract_many">
            <el-input v-model="contratc.contract_many" WarningColor="warning"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="实际合同额(万元)" prop="contract_sjmany">
            <el-input v-model="contratc.contract_sjmany" WarningColor="warning"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="合同签约日期" prop="contract_time">
            <el-input v-model="contratc.contract_time" type="date" WarningColor="warning"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="3">
          <el-form-item label="图纸套数总数">
            <el-input v-model="contratc.img_sum"></el-input>
          </el-form-item>
           
        </el-col>
        <el-col :span="3">
          <el-form-item label="已出">
            <el-input v-model="contratc.img_sjsum"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item label="差旅次数总数">
            <el-input v-model="contratc.chai_sum"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item label="已出">
            <el-input v-model="contratc.chai_sjsum"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="合同允许状态">
             <dictionaryTableSelect
                  typeKey="htzt"
                  :fieldValue.sync="customerInfo.c_htzt"
                ></dictionaryTableSelect>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
         <el-form-item label="合同备注">
            <el-input v-model="contratc.contract_reamk"></el-input>
          </el-form-item>
      </el-row>
      </el-form>
      <p align="left" style="color: black; font-size: 20px">合同签约信息</p>
      <el-button @click="AgreeShow">添加</el-button>
      <el-table :data="contractData"  style="width: 100%">
         <el-table-column prop="agreement_id" label="序号" width="180">
      </el-table-column>
       <el-table-column prop="agreement_name" label="协议名称" width="180">
      </el-table-column>
       <el-table-column prop="agreement_mj" label="建筑面积" width="180">
      </el-table-column>
       <el-table-column prop="agreement_many" label="实际合同(万元)" width="180">
      </el-table-column>
       <el-table-column prop="agreement_reamk" label="备注" width="180">
      </el-table-column>
       <el-table-column  label="操作" width="180">
         <template slot-scope="scope">
           <el-button @click="LastCha(scope.row.agreement_id)">查看</el-button>
         </template>
         
      </el-table-column>
      
      </el-table>

      <el-button @click="contractadd('contratc')">保存</el-button>

      <el-dialog
  title="添加合同签约"
  :visible.sync="Agreeisno"
  width="50%">
  <span slot="footer" class="dialog-footer">
    <el-form ref="AgreeInfo" :model="AgreeInfo" :rules="rules" label-width="130px">
      <el-row>
        <el-col :span="10">
          <el-form-item label="协议名称" prop="agreement_name">
            <el-input v-model="AgreeInfo.agreement_name" WarningColor="warning"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="收费状态">
             <el-switch v-model="AgreeInfo.agreement_sfzt"></el-switch>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
          <el-form-item label="实际合同额(万元)" prop="agreement_many"> 
            <el-input v-model="AgreeInfo.agreement_many" WarningColor="warning"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="建筑面积(㎡)" prop="agreement_mj">
            <el-input v-model="AgreeInfo.agreement_mj" WarningColor="warning"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="备注">
            <el-input v-model="AgreeInfo.agreement_reamk" ></el-input>
          </el-form-item>
          <el-button @click="Agreeisno = false">取 消</el-button>
    <el-button type="primary" @click="AgreeAdd(AgreeInfo)">确 定</el-button>
    </el-form>
    
  </span>
</el-dialog>

<el-dialog
  title="协议信息"
  :visible.sync="Chaisno"
  width="30%">
  <span slot="footer" class="dialog-footer">
    <el-form ref="chaData" :model="chaData" label-width="80px">
       <el-row>
        <el-col :span="10">
          <el-form-item label="协议名称" prop="agreement_name">
            <el-input v-model="chaData.agreement_name" WarningColor="warning"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="收费状态">
             <el-switch v-model="chaData.agreement_sfzt"></el-switch>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
          <el-form-item label="实际合同额(万元)" prop="agreement_many"> 
            <el-input v-model="chaData.agreement_many" WarningColor="warning"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="建筑面积(㎡)" prop="agreement_mj">
            <el-input v-model="chaData.agreement_mj" WarningColor="warning"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="备注">
            <el-input v-model="chaData.agreement_reamk" ></el-input>
          </el-form-item>
  
    </el-form>
    <el-button @click="Chaisno = false">取 消</el-button>
  </span>
</el-dialog>
      
    </fieldset>
  </div>
</template>
<script>
var lujing = "http://localhost:55117/api/Customer/";
var lujing1 = "http://localhost:55117/api/ContractControllers/";
export default {
  data() {
    return {
      form: {
        
      },
      AgreeInfo:{agreement_number:null},
      Agreeisno:false,
       shudata:[],
       contractData:[],
        defaultProps: {
          children: 'sonList',
          label: 'structure_name'
        },
        shudata1:[],
        defaultProps1: {
          children: 'sonList',
          label: 'architecture_name'
        },
        chaData:{},
      contratc:{
        contract_zt:null,
        contract_zicompany:null,
        contract_first_type:null,
        contract_jgtype:null,
        contract_jzfl:null,
        contract_id:null,
      },
      customerInfo: {
        fileList: [],
        c_ketype: null,
        c_firsttype:null,
        c_zicompany:null,
        c_htzt:null,
      },
      rules: {
        
        contract_id: [
          { required: true, message: "请输入合同编号", trigger: "blur" },
        ],
        contract_contname: [
          { required: true, message: "请输入合同名称", trigger: "blur" },
        ],
         contract_conname: [
          { required: true, message: "请输入建设单位", trigger: "blur" },
        ],
        // contract_const: [
        //   { required: true, message: "请选择结构形式", trigger: "blur" },
        // ],
        // contract_arch: [
        //   { required: true, message: "请输入建筑分类", trigger: "blur" },
        // ],
        contract_area: [
          { required: true, message: "请输入建筑面积", trigger: "blur" },
        ],
        contract_adder: [
          { required: true, message: "请选择工程地点", trigger: "blur" },
        ],
        contract_many: [
          { required: true, message: "请输入原始合同额", trigger: "blur" },
        ],
        contract_sjmany: [
          { required: true, message: "请输入实际合同额", trigger: "blur" },
        ],
        contract_time: [
          { required: true, message: "请输入签约日期", trigger: "blur" },
        ],
        agreement_name: [
          { required: true, message: "请输入协议名称", trigger: "blur" },
        ],
        agreement_many: [
          { required: true, message: "请输入实际合同金额", trigger: "blur" },
        ],
        agreement_mj: [
          { required: true, message: "请输入建筑面积", trigger: "blur" },
        ],
      },
      City: [],
      province: [],
      tableData: [],
      dialogVisible: false,
      contype:[],
      pageInfo: {
        pageIndex: 1,
        pageSize: 3,
        searchItem: {
          name: null,
          city_id: null,
          province_id: null,
          lxr: null,
        },
      },
    };
  },
  components: {
    dictionaryTableSelect: () =>
      import("@/components/system_manager/DictionaryTableSelect"),
  },
  created() {
    this.getprovince();
    this.getcontype();
    this.getShu();
    this.getshu1();
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    getcontype(){
      this.$myaxios.get(lujing1+"GetContype").then(obj=>{
        this.contype=obj.data;
      })
    },
    LastCha(id){
      this.Chaisno=true;
      this.$myaxios.get(lujing1+"LastCha?id="+id).then(obj=>{
        this.chaData=obj.data;
      })
    },
    contractadd(contratc){
      var yyds = this.$refs.tree.getCheckedKeys().join(',');
      var yyds1 = this.$refs.tree1.getCheckedKeys().join(',');
      this.contratc.contract_jgtype=yyds;
      this.contratc.contract_jzfl=yyds1;
      this.contratc.contract_first_type=this.customerInfo.c_firsttype;
      this.contratc.contract_zicompany=this.customerInfo.c_zicompany;
      this.contratc.contract_zt=this.customerInfo.c_htzt;
      
      this.$refs[contratc].validate((valid) => {
        if (valid) {
          
          this.$myaxios
            .post(lujing1 + "ContractAdd", this.contratc)
            .then((obj) => {
              if (obj.data != null) {
                this.$message("添加成功");
              }
            });
        } 
      });
    },
    AgreeAdd(AgreeInfo)
    {
      console.log(this.AgreeInfo)
      this.AgreeInfo.agreement_number=this.contratc.contract_id;
      // this.$refs[AgreeInfo].validate((valid) => {
      //   if (valid) {
         this.$myaxios
        .post(lujing1 + "AgreementAdd", this.AgreeInfo)
        .then((obj) => {
          if (obj.data > 0) {
            this.$message("添加成功");
            this.Agreeisno = false;
            this.getLastAgree();
          }
        });
      //   } 
      // });
    },
    getLastAgree(){
      this.$myaxios.get(lujing1+"GetAgreelast").then(obj=>{
        this.contractData=obj.data;
      })
    },
    AgreeShow(){
      this.Agreeisno=true;
    },
    Cha() {
      this.dialogVisible = true;
    },
    Tian(id){
        this.$myaxios.get(lujing+"FanCustomer?id="+id).then(obj=>{
          this.form=obj.data;
          this.dialogVisible=false;
        })
    },
    GetList() {
      this.$myaxios.post(lujing + "GetAllInfo", this.pageInfo).then((obj) => {
        console.log(this.pageInfo);
        this.tableData = obj.data.data;
        this.totalCount = obj.data.total;
      });
    },
    async getprovince() {
      this.$myaxios.get(lujing + "GetChina?id=1").then((obj) => {
        this.province = obj.data;
        console.log(this.province);
      });
    },
    async getCity(id) {
      this.$myaxios.get(lujing + "GetChina?id=" + id).then((obj) => {
        this.City = obj.data;
      });
    },
    getShu(){
      this.$myaxios.get(lujing1+"GetStruct").then(obj=>{
        this.shudata=obj.data;
      })
    },
    getshu1()
    {
      this.$myaxios.get(lujing1+"GetArchite").then(obj=>{
        this.shudata1=obj.data;
      })
    },
     getCheckedKeys() {
        console.log(this.$refs.tree.getCheckedKeys());
      },
  },
};
</script>

<style >
 
.el-input__inner[DangerColor="danger"] {
  background-color: #F56C6C;    
}
 
.el-input__inner[WarningColor="warning"] {
  background-color: #e9c896;    
}
 
.el-input__inner[SuccessColor="success"] {
  background-color: #67C23A;    
}
 
</style>